import 'package:cached_network_image/cached_network_image.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shop/common/common.dart';

class FindPage extends StatefulWidget {
  const FindPage({Key? key}) : super(key: key);

  @override
  State<FindPage> createState() => _FindPageState();
}

class _FindPageState extends State<FindPage> {
  Map<String, String> _dic = {"动物": "animal", "汽车": "car", "食物": "food", "电影": "movie", "人物": "person"};
  String selected = '动物';
  final List _data = [];

  @override
  void initState() {
    super.initState();
    _getData();
  }

  void _getData() async {
    final res = await Dio().get('https://api.apiopen.top/api/getImages?type=${_dic[selected]}&page=0&size=10');
    if (res.statusCode == 200) {
      final _list = res.data["result"]["list"];
      print("-----$_list");
      _data.clear();
      _data.addAll(_list);
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("发现好货"),
        centerTitle: true,
        backgroundColor: AppColor.mainColor,
      ),
      body: Row(
        children: [
          Container(
            width: 80,
            height: double.infinity,
            decoration: const BoxDecoration(
              border: Border(right: BorderSide(color: AppColor.divigrey, width: 1)),
            ),
            child: Column(
              children: _dic.keys
                  .map(
                    (e) => GestureDetector(
                      onTap: () {
                        if (selected == e) return;
                        setState(() {
                          selected = e;
                        });
                        _getData();
                      },
                      child: _Item(
                        val: e,
                        selected: e == selected,
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.only(top: 12),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 10,
                mainAxisSpacing: 16,
              ),
              itemBuilder: (context, index) {
                final model = _data[index];
                return Column(
                  children: [
                    Expanded(
                      child: CachedNetworkImage(
                        imageUrl: model['url'],
                        fit: BoxFit.cover,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      model['title'],
                      maxLines: 1,
                      style: AppFont.textStyle(12),
                    ),
                  ],
                );
              },
              itemCount: _data.length,
            ),
          )
        ],
      ),
    );
  }
}

class _Item extends StatelessWidget {
  final String val;
  final bool selected;
  const _Item({Key? key, required this.val, this.selected = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 60,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: selected ? AppColor.divigrey : null,
          ),
          child: Text(val),
        ),
        Divider(
          height: 1,
          color: AppColor.divigrey,
        )
      ],
    );
  }
}
